<template>
    <div id="app">
        <div>
            <span>手机号：</span><input type="text"
                   v-model="qrcodeStr" />
        </div>
        <br />
        <button @click="make()">生成二维码</button>
        <div>
            <canvas id="canvas"></canvas>
        </div>
        <p>https://cason6810.gitee.io/mathgen/qrcode-show.html?tel={{qrcodeStr}}</p>
    </div>
</template>
<script>
import QRCode from 'qrcode';

export default {
    data() {
        return {
            qrcodeStr: ''
        }
    },
    created() { },
    methods: {
        make() {
            let _this = this;
            QRCode.toCanvas(document.getElementById('canvas'),
                `https://cason6810.gitee.io/mathgen/qrcode-show.html?tel=${this.qrcodeStr}`, {
                width: 228,
                height: 228,
            },
                function (error) {
                    if (error) console.error(error)
                    console.log('success!');
                    let canvas = document.getElementById('canvas');
                    let context = canvas.getContext('2d');
                    context.font = 'bold 20px Arial';
                    context.textAlign = 'center';
                    context.textBaseline = 'bottom';
                    context.fillStyle = '#000';
                    context.fillText(_this.qrcodeStr, 113, 225, 220);
                })
        }
    }
}
</script>
<style scoped>
#app {
    text-align: center;
}
</style>